import type { Payload } from "recharts/types/component/DefaultTooltipContent";

export const CustomTooltip = ({
	active,
	payload,
	label,
	unit,
}: {
	active?: boolean;
	payload?: Payload<number, string>[];
	label?: string | number;
	unit?: string;
}) => {
	if (active && payload && payload.length) {
		return (
			<div className="bg-background border border-border p-2 rounded-lg shadow-lg flex flex-col gap-2">
				<p className="font-semibold text-sm">{label}</p>
				<div className="flex flex-col gap-1">
					{payload.map((entry) => (
						<div key={entry.name} className="flex items-center gap-2">
							<div
								className="w-3 h-3"
								style={{ backgroundColor: entry.color }}
							/>
							<span className="text-xs min-w-20 flex justify-between items-center">
								<span className="uppercase">{entry.name}</span>
								<span className="font-medium">
									{entry.value} {unit}
								</span>
							</span>
						</div>
					))}
				</div>
			</div>
		);
	}
	return null;
};
